import { faker } from "@faker-js/faker";
import { defineComponent, ref } from "vue";
import Button from "../components/Button";
import DisplayName from "../components/DisplayName";

const ComputedDemo = defineComponent({
  setup() {
    const firstName = ref("F");
    const lastName = ref("L");

    const handleChange = () => {
      firstName.value = faker.person.firstName();
      lastName.value = faker.person.lastName();
    };

    return () => (
      <div>
        <DisplayName firstName={firstName.value} lastName={lastName.value} />
        <Button onClick={handleChange}>Change</Button>
      </div>
    );
  },
});

export default ComputedDemo;
